<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <title>安装通-线上支付</title>
    <link href="/res/css/common/baseAzt.css" rel="stylesheet" type="text/css" />
    <link href="/res/css/common/backcommon.css" rel="stylesheet" type="text/css"/>
    <link href="/res/css/respective/order/back-order.css" rel="stylesheet">
    <link rel="stylesheet" href="/res/third/webupload/css/webuploader.css" type="text/css"/>
    <style type="text/css">
        .azb{
            height: 100px;
            background-color: #f7f7f7;
            padding: 0 20px;
            margin: 20px 0;
        }
        .azb dfn{
            color: #f6a422;
        }
        .azb p{
            text-align: right;
        }
        .azb p dfn{
            font-size: 20px;
        }
        button.pay{
            font-size: 16px;
            width: 100px;
            height: 30px;
            color: white;
            float: right;
        }
        button.pay:hover{
            background-color: #00ceff;
            border:1px solid #00ceff;
        }
        .tip{
            margin-top: 60px;
        }
        .tip h6>img{
            vertical-align: middle;
            cursor: pointer;
        }
        .tip h6>span{
            vertical-align: middle;
        }
        .tip h5{
            margin-bottom: 10px;
        }
        .tip h6{
            margin-bottom: 10px;
            color: #666;
        }
        .tip h6 a{
            color: #00b1db;
            cursor: pointer;
            vertical-align: middle;
        }
        .tip h6 a:hover{
            color: #00ceff;
        }
        ::-ms-clear, ::-ms-reveal{display: none;}
    </style>
</head>
<body style="background-color: #f8f8f8;">
[#include "/front/common/front_head.html"]
<div class="paypage">
    [#include "payHead.html"] 
    <h5>支付方式</h5> 
    <div class="cardbox">
        <ul class="fix fee">
            <li style="margin-right: 25px;border-color: #00ceff;">
                <a>在线支付</a>
                <img src="/res/images/safeBank/ask_03.jpg" alt="">
                <div>
                    <img src="/res/images/arrow/icon_11.png">
                    <p>线上支付流程说明：</p>
                    <p>1、您在安装通平台线上支付</p>
                    <p>2、您登陆平安易宝复核支付</p>
                    <p>3、您完成线上支付</p>
                </div>
                <i style="display: inline-block;"></i>
            </li>
            <li onclick="gotoOffline();">
                <a>线下支付</a>
                <!--<img src="/res/images/safeBank/ask_03.jpg" alt="">-->
                <!--<div>-->
                    <!--<img src="/res/images/arrow/icon_11.png">-->
                    <!--您已支付，未复核或安装通平台审核中的货款。-->
                <!--</div>-->
                <i></i>
            </li>
        </ul>
    </div>
    <h5 class="accInfo">账户信息</h5>
    <div class="acct">
        <div style="margin-right: 25px;">
            <div class="safeBank">
                <h4>我的付款账户信息</h4>
                <div style="padding: 20px 10px 10px 10px;">
                    <img src="/res/images/safeBank/safeBank12_03.png" alt="">
                </div>
                <div class="opOuter">
                    [#if !buyer??]
                        <h3>未注册及签约</h3>
                        <h2>您还未注册及签约平安易宝，</h2>
                        <h2>请尽快前往<a href="https://ebank.sdb.com.cn/corporbank/perRegedit.do?MainAcctId=15000077891511'" target="_blank">注册平安易宝</a></h2>
                    [#else]
                        <h5>
                            ${buyer.bankName!} | ${buyer.acctName!}
                        </h5>
                        <h4>
                            ${buyer.hideRelatedAcctId!}
                        </h4>
                    [/#if]
                </div>
            </div>
        </div>
        <div class="orgOuter">
            <div class="safeBank">
                <h4>卖家收款账户信息</h4>
                <div style="padding: 20px 10px 10px 10px;">
                    <img src="/res/images/safeBank/safeBank12_03.png" alt="">
                </div>
                <div class="opOuter">
                    [#if !seller??]
                        <h3>未注册及签约</h3>
                        <h2>卖家还未注册及签约平安易宝，</h2>
                        <h2>请尽快告知注册平安易宝，<a href="javascript:void(0);" onclick="remindSeller();">提醒卖家</a></h2>
                    [#else]
                        <h5>
                            ${seller.bankName!} | ${seller.acctName!}
                        </h5>
                        <h4>
                            ${seller.hideRelatedAcctId!}
                        </h4>
                    [/#if]
                </div>
            </div>
        </div>
    </div>
    [#if !buyer?? || !seller??]
        <div class="tip">
            <h5>说明</h5>
            <h6>安装通平台的线上支付，使用平安银行的平安易宝业务。</h6>
            <h6><a href="/sysfoot/helpCenter?id=47" target="_blank">平安易宝是什么？</a>  <a href="/sysfoot/helpCenter?id=45" target="_blank">如何注册、</a><a href="/sysfoot/helpCenter?id=46" target="_blank">签约？</a></h6>
            [#if !buyer??]
                <h6>
                    <img src="/res/images/safeBank/tip_03.jpg" alt="" />
                    <span>
                            签约时需提供会员代码： <strong id="cod">${companyCode!}</strong>
                        </span>
                    <a class="copy" data-clipboard-action="copy" data-clipboard-target="#cod" onclick="copyToClipboard()">复制</a>
                </h6>
            [/#if]
        </div>
    [/#if]
    [#if buyer?? && seller??]
        <div class="buyConfir">
            <div>
                <label>应付总额：</label>
                <strong class="org">￥${payInfo.totalPrice!?string('0.00')}</strong>
                <input type="hidden" id="allTp" value="${payInfo.totalPrice}"/>
            </div>
            <div>
                <span class="org">*</span><label>本次支付金额：</label>
                <input type="text" placeholder="请输入本次支付金额" id="totalPrice"/>元
                <input type="hidden" id="batchType" value="0"/><!--默认是不选中首选项的-->
                <img class="btp chose noChose" src="/res/images/checkBoxRadio/noCheck.jpg"/>
                <img class="btp chose" src="/res/images/checkBoxRadio/a_18.jpg" style="display:none;"/>
                首付款/定金
                <div class="relt">
                    <img src="/res/images/safeBank/ask_03.jpg" alt="">
                    <div style="display: none;">
                        <img src="/res/images/arrow/icon_11.png">
                        勾选后，系统优先处理
                    </div>
                </div>
            </div>
            <hr></hr>
            <div>
                <input type="hidden" id="coins" value="0"/><!--默认使用的安装币为0-->
                [#if useCoin > 0 && order.ordertype == 1]
                    <img class="chose noChose" src="/res/images/checkBoxRadio/noCheck.jpg" id="noUseCoinImg" />
                    <img class="chose" src="/res/images/checkBoxRadio/a_18.jpg" style="display:none;" id="useCoinImg"/>
                    <label>本次可使用安装币 <strong id="ucg">0</strong> 个,</label>
                    <strong style="font-size: 16px;" id="ucy">-¥ 0.00</strong>
                [/#if]
                <label>实付款：<strong class="org" style="font-size: 24px;" id="realPrice">￥0.00</strong></label>
                <input type="hidden" id="rpInput"/>
            </div>
            <!--<div>-->
                <!--<label style="font-size: 12px;">支付成功后还可获得<span class="org">122</span>个安装币，用于下次支付抵扣</label>-->
            <!--</div>-->
            <input type="hidden" id="addCoins" value="0"/>
            [#if needDan?? && needDan == 0]
            <div>
                <label>完成本单您即可获得①<span class="org">${ns!0}</span>个积分，总积分达到礼品兑换条件 <a href="/integral/integralShop">( 礼品详情）</a> ②<span class="org" id="spanAddCoinBi">0</span>个安装币，等价<span class="org" id="spanAddCoin">0</span>元，用于下个订单抵扣</label>
            </div>
            [#else]
            <div>
            	<label>完成本单您即可获得①<span class="org">${ns!0}</span>个积分，继续完成<span class="org">${needDan!0}</span>单，即可兑换礼品 <a href="/integral/integralShop">( 礼品详情）</a> ②<span class="org" id="spanAddCoinBi">0</span>个安装币，等价<span class="org" id="spanAddCoin">0</span>元，用于下个订单抵扣</label>
            </div>
            [/#if]
            <div>
                <i>保</i>
                <label>放心支付，民兴信用全额担保</label>
            </div>
        </div>
        <button type="button" class="feeConfir" onclick="pay();return false;">确认支付</button>
        <div style="margin-top: 60px;text-align: right;">
            <input style="margin-right: 5px;" type="checkbox" id="hasRead"/>已阅读并同意<a style="color: #16619d;" href="/order/xieyi" target="_blank">《安装通在线交易服务协议》</a>
        </div>
    [/#if]

    <div class="addMoney" id="checkPwd" style="display: none">
        <div>
            <label>请输入安装通登录密码：</label>
            <input type="text"/>
        </div>
        <div style="text-align: center;">
            <button class="money" type="button">确定</button>
        </div>
    </div>

    <div class="toSafe" id="paySucc" style="display: none">
        <img class="state" src="/res/images/oparaStatus/aliveSuc_03.jpg" alt="">
        <h4>您已成功提交一笔金额为 <span style="font-weight: bold;" id="succPrice">3254.02</span>元 的支付请求，请在平安易宝复核本次支付。</h4>
        <button type="button" onclick="location.href = 'https://ebank.sdb.com.cn/corporbank/index_payb.jsp';return false;">登录平安易宝</button>
    </div>
</div>
<!-- 底部菜单-->
[#include "/front/common/front_foot.html"]
</body>
<script src="/res/js/common/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/res/third/layer/layer.js"></script>
<script src="/res/js/copy/clipboard.js"></script>
<script>
    var numberReg = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
    $(function(){
        $(".fix.fee li>img").hover(function(){
            $(this).siblings("div").show();
        },function(){
            $(this).siblings("div").hide(); 
        });
        
        $(".relt>img").hover(function(){
        	$(this).siblings("div").show();
        },function(){
        	$(this).siblings("div").hide();
        })

 	$(".buyConfir img.chose").click(function(){
 		if($(this).hasClass("noChose")){//未选中切换到选中
            if($(this).hasClass("btp")) {
                $("#batchType").val(1);
            }else{
                changeCoins(1);
            }
 		}else{
            if($(this).hasClass("btp")) {
                $("#batchType").val(0);
            }else {
                changeCoins(0);
            }
 		}
 		$(this).hide();
 		$(this).siblings("img").show();
 	});

        var clipboard = new Clipboard('.copy');

        clipboard.on('success', function(e) {
            alert("文字已复制到剪贴板中");
            console.log(e);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });

        $("#totalPrice").on('blur' , function() {
            var $this = $(this).val().trim();
           if($this != ''){
               if(!numberReg.test($this)) {
                   layer.alert("请输入正确的支付金额");
                   $(this).val("");
               }else {
                   var max = Number($("#allTp").val());
                   if (Number($this) > max){
                       layer.alert("本次支付金额不能超过："+max);
                       $(this).val(max);
                   }
//               }else {
                   var i;
                   $.ajax({
                       url: "/order/getCanUseCoins",
                       type: 'post',
                       dataType: 'json',
                       data: {amount: $(this).val() , orderType : "${order.ordertype!}"},
                       beforeSend: function () {
                           i = layer.load(2);
                       },
                       success: function (data) {
                           layer.close(i);
                           var coins = data.attributes.coins;
                           var addCoins = data.attributes.addCoins;
                           $("#ucg").text(coins);
                           $("#ucy").text("-¥ " + coins.toFixed(2));
                           $("#addCoins").val(addCoins);
                           $("#spanAddCoin").text(addCoins);
                           $("#spanAddCoinBi").text(addCoins);
                       }
                   });
               }
           }else {
               $("#addCoins").val(0);
               $("#spanAddCoin").text(0);
               $("#spanAddCoinBi").text(0);
               $("#ucg").text(0);
               $("#ucy").text("-¥ 0.00");
           }
           changeCoins(0);
        });
    });

    function changeCoins(type) {
        if(type == 1){
            $('#coins').val($("#ucg").text());
            $("#useCoinImg").show();
            $("#noUseCoinImg").hide();
        }else{
            $('#coins').val(0);
            $("#useCoinImg").hide();
            $("#noUseCoinImg").show();
        }
        calPrice();
    }

    
    function calPrice() {
        var tp = $("#totalPrice").val();
        var coins = $("#coins").val();
        var rp = Number(tp) - Number(coins);
        $("#realPrice").text("￥"+rp.toFixed(2));
        $("#rpInput").val(rp.toFixed(2));
    }
    
    function gotoOffline() {
        var index = layer.load(2 , {shade:0.4});
        if(index) {
            location.href = '/order/pay_off/${order.id!}/${payInfo.id!}';
        }
    }

    function copyToClipboard() {
        var d = $("#cod").text();
        window.clipboardData.setData('text', d);
        if(window.clipboardData.getData('text')==d){
            alert("文件已复制到剪切板中");
        }
    }

    //支付
    function pay() {

        var maxPayPrice = $("#allTp").val();   //应付的最大金额

        var orderId = '${order.id!}';
        var payId = '${payInfo.id!}';
        var payMode = 3;
        var payType = '';
        var totalPrice = $('#totalPrice').val();//实际支付的
        var decoins = $('#coins').val();//安装币
        var hasRead = $('#hasRead').is(":checked");
        var addCoins = $('#addCoins').val();
        var batchType = $('#batchType').val();


        if(!numberReg.test(totalPrice)) {
            layer.alert("请输入正确的支付金额");
            return;
        }
        if(Number(totalPrice) > maxPayPrice) {
            layer.alert("本次支付金额不能超过" + maxPayPrice);
            return;
        }
        if(!hasRead) {
            layer.alert("请先阅读《安装通在线交易服务协议》");
            return;
        }

//        layer.open({
//            title:"验证",
//            type: 1,
//            content: $("#checkPwd"),
//            area: ['475px' , '200px']
//        });

        layer.prompt({title: '请输入安装通登录密码：', formType: 1}, function(pass, index){
            var ldd ;
            $.ajax({
                url : '/order/checkPwd',
                type : 'post' ,
                dataType : 'json' ,
                data : {pwd : pass} ,
                beforeSend: function () {
                    ldd = layer.load(2, {shade: 0.3});
                },
                success : function (data) {
                    layer.close(ldd);
                    if(data.success){
                        layer.close(index);
                        $("#succPrice").text(Number(totalPrice) - Number(decoins));
                        $.ajax({
                            url: '/order/pay',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                orderId: orderId,
                                payId: payId,
                                payMode: payMode,
                                payType: payType,
                                totalPrice: totalPrice,
                                decoins: decoins,
                                addCoins: addCoins,
                                batchType: batchType,
                                hasRead : hasRead
                            },
                            beforeSend: function () {
                                layer.load(2, {shade: 0.3});
                            },
                            success: function (data) {
                                if (data.success) {
                                    layer.open({
                                        title:"提示",
                                        type: 1,
                                        content: $("#paySucc"),
                                        area: ['450px' , '260px'],
                                        cancel: function (index) {
                                            [#if order.ordertype == 2]
                                            location.replace('/order/payList?payResult=1');
                                            [#else]
                                            location.replace('/order/pay/product?tab=2');
                                            [/#if]
                                        }
                                    });
                                } else {
                                    if(data.msg.indexOf("余额不足") > -1){
                                        layer.confirm("支付失败，可用余额不足。<br/>请登录他行网银为平安银行账户充值，或登录平安银行做银转商（入金）操作。"
                                                , {title : '抱歉' , icon:3 , btn: ['登录平安银行', '查看财务信息']}, function (index) {
                                                    window.open('https://ebank.sdb.com.cn/corporbank/index_payb.jsp');
                                                }, function (index) {
                                                    location.replace('/pingan/account');
                                                });
                                    }else{
                                        layer.alert(data.msg);
                                    }
                                }
                            },
                            complete: function () {
                                layer.closeAll('loading');
                            }
                        });
                    }else {
                        layer.alert("密码输入不正确");
                    }
                }
            });
        });

        return false;
    }


    var isRemined = true;

    function remindSeller() {
        if(!isRemined) {
            layer.msg("已提醒，不能重复提醒。" , {time : 1000});
            return false;
        }

        $.ajax({
            url : '/pingan/remind' ,
            type : 'post' ,
            data : {sellerCompanyId : "${order.sellerCompanyId!}" , buyerCompanyId : "${order.buyerCompanyId!}" },
            dataType : 'json' ,
            success : function(data){
                if(data.success) {
                    isRemined = false;
                    layer.msg("已发送");
                }else{
                    layer.msg("发送失败：" + data.msg);
                }
            }
        });


        return false;
    }

</script>
</html>
